<template>
	<view class="chat_container">
		<view class="chat_header">
			<image class="chat_poster" src="../../static/product/banner3.jpg"></image>
			<view class="chat_mask">
				<view class="chat_mask_title">坤物供销社</view>
				<view class="chat_mask_text">坤物家园线下生活馆</view>
				<view class="chat_mask_address">
					<span class="icon" @click="selectAddress()">&#xe623;</span>
					<span class="mask_address_text">山东省</span>
					<span class="mask_address_text">济南市</span>
					<span class="mask_address_text">槐荫区</span>
				</view>
			</view>
		</view>
		<view class="chat_body">
			<view class="chat_title">推荐生活馆</view>
			<view class="chat_item" :key="index" v-for="(item, index) in list" @click="toDetial(item)">
				<view style="display: flex;">
					<image class="chat_img" src="../../static/avatar1.png"></image>
					<view class="chat_name">
						<span style="font-size: 14px;fongt-weight: 400; color: #333333;">{{item.name}}</span>
		<!-- 				<span style="font-size: 12px;">{{item.tel}}</span> -->
						<span  style="font-size: 12px; color: #999999;">
							{{item.address.length > 24 ? item.address.slice(0, 24) + '...': item.address }}</span>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					id: 1,
					name: '快乐生活馆 秦皇岛店',
					tel: '13184603877',
					address: '河北省秦皇岛市抚宁区龙海道数谷翔园２7号楼'
				},{
					id: 2,
					name: '快乐生活馆 济南店',
					tel: '15044303656',
					address: '山东省济南市槐荫区烟台路966号蓝天家园6号楼 '
				},{
					id: 3,
					name: '快乐生活馆 太原店',
					tel: '13604438751',
					address: '山西省太原市万柏林区中海寰宇天下４号楼' 
				},{
					id: 4,
					name: '快乐生活馆 石门店',
					tel: '13944805126',
					address: '湖南省常德市石门县楚江镇楚江街道澧滨东路315号舍得喝茶吧' 
				},]
			}	
		},
		methods: {
			selectAddress() {
				
			},
			telPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel,
				})
			},
			toDetial(item) {
				uni.navigateTo({
					url: `../offlineStore/offlineStore?id=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@font-face {
	font-family: 'iconfont';
	src: url('../../css/font/iconfont.eot');
	src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
	url('../../css/font/iconfont.woff') format('woff'),
	url('../../css/font/iconfont.ttf') format('truetype'),
	url('../../css/font/iconfont.svg#iconfont') format('svg');
}
.icon {
		font-family:"iconfont" !important;
		font-size: 30upx;
		font-weight: 200;
		font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		cursor: pointer;
		margin: 0 20upx 0 30upx;
		&:hover {
			color: #E80505;
		}
	}
.chat_container {
	width: 100%;
	.chat_header {
		width: 100%;
		position: relative;
		.chat_poster {
			width: 100%;
		}
		.chat_mask {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			height: 50%;
			display: flex;
			flex-direction: column;
			background-color: rgba(256,256,256,0.3);
			align-items: center;
			justify-content: center;
			.chat_mask_title {
				font-size: 50upx;
				font-weight: 700;
			}
			.chat_mask_text {
				font-size: 30upx;
			}
			.chat_mask_address{
				font-size: 26upx;
				.mask_address_text {
					margin-right: 10upx;
				}
			}
		}
	}
	.chat_body {
		width: 100%;
		padding: 20upx;
		height: 200upx;
		color: #666;
		box-sizing: border-box;
		margin-bottom: 160upx;
		.chat_title {
			border-bottom: 1px solid #f0f0f0;
		}
		.chat_item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px solid #f0f0f0;
			.chat_img {
				width: 100upx;
				height: 100upx;
				padding: 10upx;
				margin-right: 20upx;
			}
			.chat_name {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
	}

}
	
</style>
